//找到图片
let image = $('#image');
//剪裁配置项
let option = {
  /// 纵横比(宽高比)
  aspectRatio: 1, // 正方形
  // 指定预览区域
  preview: '.img-preview' // 指定预览区的类名（选择器）
};
// - 调用cropper方法，创建剪裁区
$('#image').cropper(option);


//-------------点击-------
$('button:contains("上传")').on('click', function () {
  $('#file').trigger('click');
})


//---------------选择了图片,更换图片---------
$('#file').on('change', function () {
  // console.dir(this);
  //获取图片的url地址
  if (this.files.length > 0) {
    //1.找到图片文件地址
    let fileObj = this.files[0];
    //2.创建url
    let url = URL.createObjectURL(fileObj);
    //console.log(url);
    //更新图片
    //image.cropper('destroy').atte('src', url).cropper(option);
    image.cropper('replace', url);
  }
})




//----------------完成更换-----------
//点击 确定 --->剪裁图片--->转换成baxe64格式 -->提交给接口
$('button:contains("确定")').on('click', function () {
 
  //剪裁图片
  let canvas = image.cropper('getCroppedCanvas', { width: 30, height: 30 });
  //canvas有一套内置的api方法,属于js原生语法
  let base64 = canvas.toDataURL('image/jpeg', 1);
  //console.log(base64);
  axios.post('/my/user/avatar', `avatar=${ encodeURIComponent(base64)}`).then(res => {
    let { status, message } = res.data;
    if (status === 0) {
      layer.msg(message);
      // 更新index.html的头像
      window.parent.getUserInfo();
    }
  })
})